<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body></body>

</html>

<script>
    const canvas = document.createElement("canvas");
    canvas.width = 600;
    canvas.height = 400;
    document.body.append(canvas);
    const context = canvas.getContext("2d");

    // 画笑脸
    // 3.1 画外面的大圆
    context.arc(300, 200, 100, 0, 2 * Math.PI);
    const g = context.createRadialGradient(250, 150, 0, 250, 150, 150)
    g.addColorStop(0, '#ccc')
    g.addColorStop(1, '#000')
    context.fillStyle = g;
    context.fill();

    // 3.2画左眼，在两个不相关的图形之间，需要告诉context，重新生成一个新的路径，就是你的落笔点要改变了
    context.beginPath()
    context.arc(250, 150, 15, 0, 2 * Math.PI);
    context.stroke();
    context.closePath()

    // 3.3右边眼睛
    context.beginPath()
    context.arc(350, 150, 15, 0, 2 * Math.PI);
    context.stroke();
    context.closePath()

    // 3.4鼻子， arc是正经的圆形，这里可以画椭圆，用ellipse
    context.beginPath()
    // context.arc(300, 180, 18, 0, 2 * Math.PI);
    context.ellipse(300, 180, 15, 20, 0, 0, 2 * Math.PI)
    context.stroke();
    context.closePath()

    // 3.4嘴唇
    context.beginPath()
    context.arc(300, 210, 70, 0, Math.PI);
    context.stroke();
    context.closePath()




</script>